<template>
  <el-dialog :title="'新增产品'" :visible.sync="open" width="800px" append-to-body @close="cancel">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="产品名称" prop="productName">
            <el-input v-model="form.productName" placeholder="请输入产品名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="通讯协议" prop="commProtocol">
            <el-select v-model="form.commProtocol" placeholder="请选择通讯协议" style="width: 100%" :disabled="isCamera">
              <el-option v-for="dict in filteredCommProtocols" :key="dict.value" :label="dict.label" :value="dict.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="设备类型" prop="deviceType">
            <el-select v-model="form.deviceType" placeholder="请选择设备类型" style="width: 100%" @change="handleDeviceTypeChange">
              <el-option v-for="dict in dict.type.iot_device_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="传输协议" prop="transProtocol">
            <el-select v-model="form.transProtocol" placeholder="请选择传输协议" style="width: 100%" :disabled="isCamera">
              <el-option v-for="dict in filteredTransProtocols" :key="dict.value" :label="dict.label" :value="dict.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联网方式" prop="networkMethod">
            <el-select v-model="form.networkMethod" placeholder="请选择联网方式" style="width: 100%">
              <el-option v-for="dict in dict.type.iot_network_method" :key="dict.value" :label="dict.label" :value="dict.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="启用授权" prop="isAuthRequired">
            <el-radio-group v-model="form.isAuthRequired">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20" v-if="form.isAuthRequired === 1">
        <el-col :span="12">
          <el-form-item label="认证方式" prop="authMethod">
            <el-select v-model="form.authMethod" placeholder="请选择认证方式" style="width: 100%">
              <el-option v-for="dict in dict.type.iot_auth_method" :key="dict.value" :label="dict.label" :value="dict.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addProduct } from "@/api/iot/product";

export default {
  name: "ProductAdd",
  dicts: ['iot_device_type', 'iot_trans_protocol', 'iot_auth_method', 'iot_comm_protocol', 'iot_network_method'],
  data() {
    return {
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        productName: null,
        commProtocol: null,
        deviceType: null,
        transProtocol: null,
        networkMethod: null,
        isAuthRequired: 0,
        authMethod: null
      },
      // 表单校验规则
      rules: {
        productName: [
          { required: true, message: "产品名称不能为空", trigger: "blur" }
        ],
        commProtocol: [
          { required: true, message: "通讯协议不能为空", trigger: "change" }
        ],
        deviceType: [
          { required: true, message: "设备类型不能为空", trigger: "change" }
        ],
        transProtocol: [
          { required: true, message: "传输协议不能为空", trigger: "change" }
        ],
        networkMethod: [
          { required: true, message: "联网方式不能为空", trigger: "change" }
        ],
        authMethod: [
          { required: true, message: "认证方式不能为空", trigger: "change" }
        ]
      },
      // 添加计算属性所需的数据
      isCamera: false,
      filteredCommProtocols: [],
      filteredTransProtocols: []
    };
  },
  created() {
    // 初始化协议选项
    this.$nextTick(() => {
      if (this.dict.type) {
        this.filteredCommProtocols = [...this.dict.type.iot_comm_protocol];
        this.filteredTransProtocols = [...this.dict.type.iot_trans_protocol];
      }
    });
  },
  methods: {
    // 显示弹出层
    show() {
      this.open = true;
      // 初始化协议选项
      this.filteredCommProtocols = [...this.dict.type.iot_comm_protocol];
      this.filteredTransProtocols = [...this.dict.type.iot_trans_protocol];
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        productName: null,
        commProtocol: null,
        deviceType: null,
        transProtocol: null,
        networkMethod: null,
        isAuthRequired: 0,
        authMethod: null
      };
      this.isCamera = false;
      this.filteredCommProtocols = [...this.dict.type.iot_comm_protocol];
      this.filteredTransProtocols = [...this.dict.type.iot_trans_protocol];
      this.resetForm("form");
    },
    // 提交按钮
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addProduct(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.$emit('success', response.data);
          });
        }
      });
    },
    // 处理设备类型变化
    handleDeviceTypeChange(value) {
      this.isCamera = value === 'camera';
      
      if (this.isCamera) {
        // 如果是监控设备，固定协议
        this.form.commProtocol = 'sip';
        this.form.transProtocol = 'gb28181';
        // 过滤协议选项
        this.filteredCommProtocols = this.dict.type.iot_comm_protocol.filter(item => item.value === 'sip');
        this.filteredTransProtocols = this.dict.type.iot_trans_protocol.filter(item => item.value === 'gb28181');
      } else {
        // 如果不是监控设备，重置为全部选项
        this.form.commProtocol = null;
        this.form.transProtocol = null;
        this.filteredCommProtocols = [...this.dict.type.iot_comm_protocol];
        this.filteredTransProtocols = [...this.dict.type.iot_trans_protocol];
      }
    }
  }
};
</script>

<style scoped>
.el-select {
  width: 100%;
}

.el-form-item {
  margin-bottom: 20px;
}
</style> 